<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: CHJYPC
  Date: 2021/6/1
  Time: 18:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>学业预警</title>
    <link rel="stylesheet" type="text/css" href="${rootPath}resources/css/academicWarning.css"/>
    <script type="text/javascript" src="${rootPath}resources/js/imporDataPlain/jquery.min.js"></script>
    <script type="text/javascript" src="${rootPath}resources/js/academocWarning.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            bar();
        });

        function bar() {
            <%--var tongShi = document.getElementById("tongShi");--%>
            <%--var limit = document.getElementById("limit");--%>
            <%--var option = document.getElementById("option");--%>
            <%--var creditSum = document.getElementById("creditSum");--%>
            <%--tongShi.style.width = ${tongShiCreditSum/tongShiSum*100}+"%";--%>
            <%--limit.style.width = ${limitCreditSum/limitSum*100}+"%";--%>
            <%--option.style.width = ${optionCreditSum/optionSum*100}+"%";--%>
            <%--creditSum.style.width = ${creditSum/allCreditSum*100}+"%";--%>


            // 画布长200，宽30
            var canvasCreadit = document.getElementById("creadiCanvas");
            var cxt = canvasCreadit.getContext("2d");
            //白色背景
            cxt.fillStyle = "#FFFFFF";
            cxt.fillRect(15, 0, 170, 30);
            cxt.beginPath();
            cxt.arc(15, 15, 15, 0, Math.PI * 2, true);
            cxt.closePath();
            cxt.fill();
            cxt.beginPath();
            cxt.arc(185, 15, 15, 0, Math.PI * 2, true);
            cxt.closePath();
            cxt.fill();
            <%--//绿色进度条${creditSum/allCreditSum*100}--%>
            cxt.fillStyle = "#76b070";
            cxt.beginPath();
            cxt.arc(16, 15, 15, 1.5 * Math.PI, 0.5 * Math.PI, true);//半圆边框
            // cxt.closePath();不画闭圆
            cxt.fill();
            var creadit =${creditSum/allCreditSum};

            if (creadit > 0) {
                //画已修学分绩长度
                cxt.fillRect(15, 0, 170 *creadit, 30);
                cxt.moveTo(15, 0);
                cxt.lineTo(185, 0);
                cxt.moveTo(15, 30);
                cxt.lineTo(185, 30);
                cxt.stroke();
                cxt.beginPath();
                cxt.arc(184, 15, 15, 1.5 * Math.PI, 0.5 * Math.PI, false);
                cxt.stroke();

                //画3条竖线，表明大一、二、三、四个阶段需要修的学分
                cxt.fillStyle = "#777777";
                cxt.moveTo(200 *${line_01}, 0);
                cxt.lineTo(200 *${line_01}, 30);

                cxt.moveTo(200 *${line_02}, 0);
                cxt.lineTo(200 *${line_02}, 30);

                cxt.moveTo(200 *${line_03}, 0);
                cxt.lineTo(200 *${line_03}, 30);
                cxt.stroke();
            }
        }
    </script>
</head>
<body>

<div class="wrapper">
    <div class="header">
        <div class="searchStudent">
            <form id="searchStudentByIdOrName" action="academicWarningServlet" method="post">
                <label>学号</label>
                <input type="text" name="studentNo">
                <%--<label>姓名</label>--%>
                <%--<input type="text" name="studentName">--%>
                <input type="submit" value="  搜索  ">
            </form>
        </div>
    </div>
    <div class="main">
        <div class="studentInfo">
            <ul class="studentInfoUl">
                <li>
                    <label>学号:</label>
                    ${id!=null?id : ""}
                </li>
                <li>
                    <label>姓名:</label>
                    ${name!=null?name : ""}
                </li>
                <li>
                    <label> 学业预警：${warning==null?"":warning}</label>
                </li>
                <li>
                    <h4>学位授予：</h4>
                    <p class="contentXue">
                    </p>
                </li>
                <li>
                    <label>学分绩：</label>
                </li>
                <div id="progress-wrapper">
                    <li>
                        <label>通识已修：${tongShiCreditSum!=null?tongShiCreditSum:""}/${tongShiSum==null?"":tongShiSum}</label>
                        <%--<span>--%>
                        <%--<span id="tongShi"--%>
                        <%--style="width:0%">${tongShiCreditSum!=null?tongShiCreditSum:""}/${tongShiSum==null?"":tongShiSum}</span>--%>
                        <%--</span>--%>
                    </li>
                    <li>
                        <label> 限选已修：${limitCreditSum!=null?limitCreditSum:""}/${limitSum==null?"":limitSum}</label>
                        <%--<span>--%>
                        <%--<span id="limit"--%>
                        <%--style="width:0%">${limitCreditSum!=null?limitCreditSum:""}/${limitSum==null?"":limitSum}</span>--%>
                        <%--</span>--%>
                    </li>
                    <li>
                        <label> 任选已修：${optionCreditSum!=null?optionCreditSum:""}/${optionSum==null?"":optionSum}</label>
                        <%--<span>--%>
                        <%--<span id="option"--%>
                        <%--style="width:0%">${optionCreditSum!=null?optionCreditSum:""}/${optionSum==null?"":optionSum}</span>--%>
                        <%--</span>--%>
                    </li>
                    <%--<li>--%>
                    <%--<label> 已修学分：${creditSum!=null?creditSum:""}/${allCreditSum==null?"":allCreditSum}</label>--%>
                    <%--<span>--%>
                    <%--<span id="creditSum" style="width:0%"></span>--%>
                    <%--</span>--%>
                    <%--</li>--%>
                    <li>
                        <label style="white-space:nowrap"> 已修学分：${creditSum!=null?creditSum:""}/${allCreditSum==null?"":allCreditSum}</label>
                        <canvas id="creadiCanvas" width="200" height="30"></canvas>
                    </li>
                </div>
            </ul>
        </div>
        <div class="StudentFailCourse">
            <label class="lableFour">不及格课程</label>
            <div class="StudentGraduationCourseOL">

                <ol>
                    <c:forEach var="entry" items="${requestScope.hashFaMap}">  
                        <li>
                              ${entry.value==2? entry.key:"" } 
                        </li>
                    </c:forEach> 
                </ol>
            </div>
        </div>
        <div class="StudentNotCourse">
            <label class="lableFour">未修课程</label>
            <div class="StudentGraduationCourseOL">
                <ol>
                    <c:forEach var="entry" items="${requestScope.coursesMap}">  
                        <li>
                              ${entry.key } 
                        </li>
                    </c:forEach> 
                </ol>
            </div>
        </div>
        <div class="StudentGraduationCourse">
            <label class="lableFour">培养方案涉及课程</label>
            <div class="StudentGraduationCourseOL">
                <ol>
                    <c:forEach var="entry" items="${requestScope.hashMap}">  
                        <c:if test="${entry.value==2 or entry.value==1}" var="rtn12" scope="page">
                            <li style="background-color: #6D6D6D">
                                  ${entry.key} 
                                    <%--✓--%>
                            </li>
                        </c:if>
                        <c:if test="${entry.value==0}" var="rtn0" scope="page">
                            <li>
                                  ${entry.key} 
                            </li>
                        </c:if>
                    </c:forEach> 
                </ol>
            </div>
        </div>
    </div>
</div>
</body>
</html>
